<template>
    <div>
        <h1> onUpdated 用于在响应式数据更新或DOM发生变化时执行的某些逻辑 </h1>
        <p>该函数在每次更新完成后立即调用，适合用于需要在组件状态或 DOM 变更后进行处理的场景。</p>

        <div class="group">
            <h4>1、监听数据变化后滚动到底部</h4>
            <div ref="messageBox" class="message-box">
                <div v-for="message in messages" :key="message">{{ message.text }}</div>
                <button @click="addMessage">增加信息</button>
            </div>
        </div>

        <div class="group">
            <h4>2、数据变化后执行动画</h4>
            <p ref="numberDisplay" class="number">{{ number }}</p>
            <button @click="increaseNumber">增加</button>
        </div>

        <div class="group">
            <h4>3、监听子组件变化并调整布局</h4>
            <ChildComponent ref="childComp"></ChildComponent>
        </div>


    </div>
</template>

<script setup>
import { onUpdated, ref } from 'vue';
import ChildComponent from './components/ChildComponent.vue';

const messages = ref([
    {
        id: 1,
        text: 'Hello'
    },
    {
        id: 2,
        text: 'World'
    },
])

const addMessage = () => {
    messages.value.push(
        {
            id: messages.value.length + 1,
            text: ' New message'
        },
    )
}

const messageBox = ref(null)
const number = ref(0)
const numberDisplay = ref(null)
const childComp = ref(null)

const increaseNumber = () => {
    number.value++
}

onUpdated(() => {
    // 数据更新后滚动到底部
    if (messageBox.value) {
        messageBox.value.scrollTop = messageBox.value.scrollHeight
    }
    // 场景说明：当消息列表message更新时，onUpdated 钩子会触发滚动条到消息列表的底部。这种情况常用于聊天或动态数据加载的场景。

    // 数据变化后给数字添加动画
    if (numberDisplay.value) {
        // 设置transition 属性以应用动画
        numberDisplay.value.style.transition = 'transform 1s'
        // 设置 transform 属性以向右移动并放大元素
        numberDisplay.value.style.transform = 'translateX(100px) scale(1.2)'
        // 在1秒后恢复原始大小
        setTimeout(() => {
            numberDisplay.value.style.transform = 'scale(1)'
        }, 1000);
    }
    // 场景说明：每次数字 number 变化时，onUpdaed钩子会触发一个向右移动并放大的动画效果。这样的场景可以用于显示变化的统计数据或计数器时，增强用户体验。


    // 当子组件的内容更新时，调整父组件的布局
    if (childComp.value) {
        console.log('子组件更新，调整布局...');
    }
    // 场景说明：当子组件 ChildComponent 的内容发生变化时，onUpdated 钩子可以用来捕获这些变化并对父组件进行相应的布局调整。这种场景常用于父组件根据子组件的动态变化进行响应式布局调整。
})

</script>

<style lang="scss" scoped>
h1 {
    margin-left: 20px;
    margin-top: 20px;
}

.group {
    border: 3px solid deepskyblue;
    margin: 20px;
    padding: 10px;
}

.message-box {
    height: 100px;
    overflow-y: auto;
    border: 1px solid #ccc;
}

.number {
    font-size: 2em;
}
</style>